<template>
	<view>
		<uni-swiper-dot :info="bannerList" :current="bannerCurrent" mode="round" :dotsStyles="dotsStyles">
			<swiper class="swiper-box" @change="bannerChange">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item" @click="toPage(item)">
						<image :src="$util.showImage(item.imageUrl)" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	export default {
		name: "banner",
		props: {
			data: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				bannerList: [],
				bannerCurrent: 0,
				dotsStyles: {
					backgroundColor: '#909399',
					border: '1px #909399 solid',
					selectedBackgroundColor: '#18bc37',
					selectedBorder: '1px #18bc37 solid'
				},
			};
		},
		mounted() {
			if (this.data && this.data.length > 0) {
				this.bannerList = this.data;
			}
		},
		methods: {
			bannerChange(e) {
				this.bannerCurrent = e.detail.current
			},
			toPage(item) {
				if(item.linkUrl){
					uni.navigateTo({
						url: '/pages/common/webView',
						success: (res) => {
							res.eventChannel.emit('url', item.linkUrl)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-box {
		height: 200px;

		.swiper-item {
			image {
				width: 100%;
				height: 200px;
			}
		}
	}
</style>
